<div context-menu 
     class="section item group" 
     data-target="context-menu-{{ item.itemId }}"
     ng-class="{ highlight : item.itemId === highlightedId, 'highlighted': is_highlighted, 'roster':item.isRoster }"
     ui-sref-active="selected"
     context-menu-hide-on-mouse-leave="true">
    <span class="cursor"></span>
    <a class="handler" ui-tree-handle></a>
    <a class="item-body" id="{{item.itemId}}" 
       ui-sref="{{ !item.isRoster ? 'questionnaire.chapter.group({itemId: item.itemId})' : 'questionnaire.chapter.roster({itemId: item.itemId})' }}">
        <div class="item-text">
            <button type="button" ng-class="{'btn-expand': collapsed, 'btn-collapse': !collapsed}" data-nodrag ng-click="toggle(this)"
                    ng-mouseenter="is_highlighted = true" ng-mouseleave="is_highlighted = false"></button>
            <span class="roster-marker" ng-show="item.isRoster" ng-i18next="TreeRoster"></span>
            <span ng-bind-html="item.title | escape | highlight:search.searchText"></span>
        </div>
        <div class="qname-block">
            <div class="conditions-block">
                <div class="enabling-group-marker" ng-class="{'hide-if-disabled': item.hideIfDisabled}" ng-if="item.hasCondition"></div>
            </div>
            <span ng-bind-html="item.variable | escape | highlight:search.searchText"></span>
        </div>
    </a>
    <div class="dropdown position-fixed" id="context-menu-{{ item.itemId }}">
        <ul class="dropdown-menu" role="menu">
            <li>
                <a ng-click="addQuestion(item)" ng-if="!questionnaire.isReadOnlyForUser && !currentChapter.isReadOnly" ng-i18next="TreeAddQuestion">Add question</a>
            </li>
            <li>
                <a ng-click="addGroup(item)" ng-if="!questionnaire.isReadOnlyForUser && !currentChapter.isReadOnly && !currentChapter.isCover" ng-i18next="TreeAddSection">Add sub-section</a>
            </li>
            <li>
                <a ng-click="addRoster(item)" ng-if="!questionnaire.isReadOnlyForUser && !currentChapter.isReadOnly && !currentChapter.isCover" ng-i18next="TreeAddRoster">Add roster</a>
            </li>
            <li>
                <a ng-click="addStaticText(item)" ng-if="!questionnaire.isReadOnlyForUser && !currentChapter.isReadOnly" ng-i18next="TreeAddStaticText">Add static text</a>
            </li>
            <li>
                <a ng-click="addVariable(item)" ng-if="!questionnaire.isReadOnlyForUser && !currentChapter.isReadOnly" ng-i18next="TreeAddVariable">Add variable</a>
            </li>
            <li><a ng-click="copyRef(item)" ng-i18next>Copy</a></li>
            <li >
                <a ng-disabled="!readyToPaste" ng-click="pasteItemAfter(item)" ng-if="!questionnaire.isReadOnlyForUser && !currentChapter.isReadOnly" ng-i18next="PasteAfter"></a>
            </li>
            <li><a ng-click="deleteGroup(item)" ng-if="!questionnaire.isReadOnlyForUser && !currentChapter.isReadOnly" ng-i18next>Delete</a></li>
        </ul>
    </div>
</div>
<div ng-hide="collapsed" class="slide" 
     ng-class="{'highlighted': is_highlighted, 'roster-items':item.isRoster }" 
     ui-tree-nodes="item.items" 
     ng-model="item.items">
    <div ng-repeat="item in item.items | filter:searchItem"
         class="filter-animate"
         ui-tree-node ng-include="itemTemplate(item.itemType)">
    </div>
</div>
